<template>
    <div id="mapview" ref="mapview" class="mapview">
        
    </div>
</template>

<script>
import request from '../api/request';
import { loadModules } from 'esri-loader';
import DrawTool from '../api/drawTool';
import queryTask from '../api/queryTask';
import MapTools from '../api/mapTools';
import analyze from '../api/analyze';
import config from '../api/config';
import layerUtils from '../api/layerUtils';

import EsriJSONToGeoJSON from '../api/EsriJSONToGeoJSON';
import echartsUtils from '../api/echartsUtils'
import echarts from 'echarts'
// let echarts = require('echarts/lib/echarts');
// require("echarts/lib/chart/map");
// import Echarts3Layer from 'arcgis-echarts3';

let map, baseLayer, dikuai, sheshi, resultLayer, mapTools, drawTool;
let defaultExtent;
let layerIndex = 0;
let echarts3Layer;

export default {
    computed: {
        funtype(){
            return this.$store.state.funList.funtype
        },
        tooltype(){
            return this.$store.state.toolList.tooltype
        }
    },
    watch: {
        'funtype': function(val, oldVal){
            layerUtils.removeFeatureLayer(map, sheshi);
            switch (val) {
                case config.analyzeType.YILIAO: 
                    sheshi = layerUtils.addFeatureLayer(map, analyze.mapServer.yiliaoUrl,2);
                    break;
                case config.analyzeType.YANGLAO:
                    sheshi = layerUtils.addFeatureLayer(map, analyze.mapServer.yanglaoPointUrl,2);
                    break;
                case config.analyzeType.LVDI:
                    sheshi = layerUtils.addFeatureLayer(map, analyze.mapServer.lvdiUrl,2);
                    break;
                default : 
                    break;
            }
            let self = this;
            if(val != config.analyzeType.NONE){
                drawTool.drawPolygon(function(geometry){
                    analyze.pg(geometry, dikuai, sheshi, echarts3Layer ,val);
                    // analyze.pg(geometry, dikuai, sheshi, resultLayer ,val);
                    self.$store.commit("setFunType", config.analyzeType.NONE);
                })
            }
            
        },
        'tooltype': function(val, oldVal){
            switch (val) {
                case config.toolType.CLEAR: 
                    map.graphics.clear();
                    if(resultLayer) resultLayer.clear(); 
                    break;
                case config.toolType.FULL_EXTENT:
                    map.setExtent(defaultExtent)
                    break;
                case config.toolType.SHOW_HIDE_BASE_MAP:
                    layerUtils.changeLayerVisibility(baseLayer);
                    break;
                case config.toolType.SHOW_HIDE_DIKUAI:
                    layerUtils.changeLayerVisibility(dikuai);
                    break;
                case config.toolType.SHOW_HIDE_SHESHI:
                    layerUtils.changeLayerVisibility(sheshi);
                    break;
                case config.toolType.SHOW_HIDE_RESULT:
                    layerUtils.changeLayerVisibility(resultLayer);
                    break;
                case config.toolType.SEARCH_DIKUAI:
                    drawTool.drawPolygon(function(geometry){
                        queryTask.executeQueryFeatureLayer(dikuai, geometry, null, null,  null, function(result){
                            console.log(JSON.stringify(EsriJSONToGeoJSON(result)));
                            echartsUtils.drawMap(map.extent,echarts3Layer, JSON.stringify(EsriJSONToGeoJSON(result)))
                        })
                    })
                    break;
                default : 
                    drawTool.drawGeo(val);
                    break;
            }
            if(val != config.toolType.NONE){
                this.$store.commit("setToolType", config.toolType.NONE);
            }
        }
    },
    mounted: function () {
        request.getMapParams({
            success: (data) => {
                const item = data.item;
                loadModules(['esri/map', 'esri/geometry/Extent','esri/layers/ArcGISTiledMapServiceLayer',
                    'esri/layers/ArcGISDynamicMapServiceLayer','esri/layers/FeatureLayer','esri/layers/GraphicsLayer',
                    'src/Echarts3Layer'])
                .then(([Map, Extent, ArcGISTiledMapServiceLayer,ArcGISDynamicMapServiceLayer,FeatureLayer,GraphicsLayer,Echarts3Layer]) => {
                    defaultExtent = new Extent({
                            "xmin" : item.xmin,
                            "ymin" : item.ymin,
                            "xmax" : item.xmax,
                            "ymax" : item.ymax,
                            "spatialReference" : {
                                "wkid" : item.wkid
                            }
                        })
                    map = new Map(this.$refs.mapview, {
                        logo:false,
                        extent:defaultExtent,
                        spatialReference:{"wkid" : item.wkid}
                    });
                    baseLayer = layerUtils.addTileLayer(map, item.baseUrl);
                    dikuai = layerUtils.addFeatureLayer(map, analyze.mapServer.dikuaiUrl);
                    resultLayer = map.addLayer(new GraphicsLayer());
                    
                    mapTools = new MapTools();
                    drawTool = new DrawTool(map);
                    
                    map.on('load', function(){
                        echarts3Layer = new Echarts3Layer(map, echarts);
                        var chartsContainer = echarts3Layer.getEchartsContainer();
                        var myChart = echarts3Layer.initECharts(chartsContainer);
                    })
                    
                })
                .catch(err => {
                    console.error(err);
                });
            }
        })

    }
}
</script>

<style lang="less">
    .mapview {
        position: absolute;
        height: 100%;
        left: 368px;
        top: 0;
        right: 0;
    }
</style>
